<template>
	<view class="send-text">
		<!-- 这个页面专门做 发送短信验证码 需要什么东西 第一个需要数据 什么数据  -->
		<input
			:style="{ width: sw, height: height, lineHeight: lh, textAlign: ta ,}"
			:maxlength="maxlength"
			@input="handleInput"
			:value="modelValue"
			:type="type"
			:placeholder="placeholder"
			:placeholderStyle="placeholderStyleStr"
		/>
		<up-line direction="col" :length="lineL" :style="{ backgroundColor: lineBC, marginTop: lineMT }" style="width: 5rpx"></up-line>
		<view class="code" :style="{width:bW,height:bH,fontSize:bfs,color:bC,cursor: isSend ? 'not-allowed' : ''}" @click="sendCode">
				{{ isSend ? `重新发送 ${isNum}` : '获取验证码' }}
		</view>
		
	
	</view>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import initApi from '@/apis/init.js';
const props = defineProps({
	/* button-text 		*/
		bH:{
			type:String,
			default:"100rpx"
		},
		bW:{
			type:String,
			default:"190rpx"
		},
		bfs:{
			type:String,
			default:"30rpx"
		},
		bC:{
			type:String,
			default:"#d93715"
		},
	/* line */
	lineL: {
		type: String,
		default: '50rpx'
	},
	lineBC: {
		type: String,
		default: '#d93715'
	},
	lineMT: {
		type: String,
		default: '25rpx'
	},
	/* input数据 */
	height: {
		type: String,
		default: '100rpx'
	},
	sw: {
		type: String,
		default: '350rpx'
	},
	ta: {
		type: String,
		default: 'center'
	},
	lh: {
		type: String,
		default: '100rpx'
	},
	pc: {
		type: String,
		default: '#818181'
	},
	ps: {
		type: String,
		default: '36rpx'
	},
	type: {
		type: String,
		default: 'tel'
	},
	modelValue: {
		type: String,
		default: ''
	},

	placeholder: {
		type: String,
		default: '请输入验证码'
	},
	maxlength: {
		type: Number,
		default: 6
	},
	iml:{
		type:String,
		default:"50rpx"
	},
	phone:{
		type:String,
		default:''
	},
	channelCode:{
		type:String,
		default:''
	},
	productCode:{
		type:String,
		default:''
	},
	allChecked:{
		type:Boolean,
		default:false
	}
	/* 中间line */
});
//  本地数据
const isSend = ref(false);
const isNum = ref(0);
const isTimer = ref();

// 发送验证码
const sendCode = async (flag) => {
	const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(props.phone);
	if (!isOkMobile) return uni.utils.toast('请输入正确的手机号');
	if (!props.allChecked) return uni.utils.toast('请勾选 《阅读并同意上述内容》');

	if (isSend.value) return;

	try {
		const arr = {
			mobile: props.mobile,
			channelCode: props.channelCode,
			productCode: props.productCode
		};

		const res = await initApi.initInventoryPackageOrder(arr);
		if (res.code == 20000) {
			emit('orderNo',res.data.orderNo)
		} else {
			// 后期会不会 验证手机号呢
			return uni.utils.toast(res.message);
		}
		isNum.value = 60;
		isSend.value = true;
		isTimer.value = setInterval(() => {
			if (isNum.value <= 0) {
				clearInterval(isTimer.value);
				isNum.value = 0;
				isSend.value = false;
			}
			isNum.value--;
		}, 1000);
		return uni.utils.toast('验证码发送成功');
	} catch (e) {
		console.log(e);
		//TODO handle the exception
		uni.utils.toast('请输入正确手机号');
		isSend.value = false;
		isNum.value = 0;
		clearInterval(isTimer.value);
	}
};


const emit = defineEmits(['update:modelValue','orderNo']);
const placeholderStyleStr = computed(() => {
	return `color: ${props.pc}; font-size: ${props.ps};`;
});
const handleInput = (event) => {
	emit('update:modelValue', event.detail.value);
};
</script>

<style lang="scss" scoped>
.send-text {
	display: flex;
	height: 100rpx;
	.code {
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
}
</style>
